<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 10000px;
        }
        .box{
            margin: 20px;
            border: 10px solid black;
            padding: 30px;
            width: 500px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class = "box"></div>
<script>
    /*
    * 事件对象event(简写成e)：
    *   就是回调函数（事件 等号 后面赋值的函数）接收的形参
    *
    * MouseEvent对象的一些重要属性
    *
    *   点击位置相对于元素内部左上角的偏移量
    *   offsetX offsetY：
    *   鼠标点击事件触发的时候，鼠标在元素中的坐标位置（相对于边框border内部的左上角为起点）
    *
    *   点击位置相对于页面文档左上角的偏移量
    *   pageX pageY：
    *   鼠标点击事件触发的时候，鼠标相对于整个网页页面page左上角的坐标位置（注意与浏览器可视窗口相区分）
    *
    *   点击位置相对于浏览器可视窗口左上角的偏移量
    *   clientX（x） clientY（y）：
    *   鼠标点击事件触发的时候，鼠标相对于浏览器可视窗口区域左上角的坐标位置
    *
    *   点击位置相对于计算机屏幕左上角的偏移量
    *   screenX screenY：
    *   鼠标点击事件触发的时候，鼠标相对于计算机屏幕左上角的坐标位置
    *
    *
    * 从小到大：
    *   offsetX(Y) < pageX(Y) < clientX(Y) < screenX(Y)
    *   元素 < 网页页面 < 浏览器可视窗口 < 计算机屏幕
    *
    *
    * */
    let box = document.querySelector(".box")

    /*
    //如果我们要按ctrl + alt + shift 三个按键，再点击这个盒子，这个盒子就会被删除
    box.onclick = function (e){
        //console.log(e) //鼠标点击之后会返会一个对象MouseEvent，里面包含各种属性
        if(e.ctrlKey && e.altKey && e.shiftKey){
            this.parentNode.removeChild(this)
        }
    }
    */

    box.onclick = function (e){
        if(e.offsetX < 250 && e.offsetY < 250){
            this.innerHTML = "左上角"
        }
        if(e.offsetX >= 250 && e.offsetY < 250){
            this.innerHTML = "右上角"
        }
        //左下角右下角同理
    }


</script>
</body>
</html>